Tiles

A tile is a grouping of related information associated with a record.

Basedev ready

Preview

Code

<div class="slds-tile">
  <p class="slds-tile__title slds-truncate"><a href="#void">Salesforce UX</a></p>
  <div class="slds-tile__detail slds-text-body--small">
    <p class="slds-truncate">26 Members</p>
  </div>
</div>

The base tile is borderless by default.

Listdev ready

Preview

Code

<ul class="slds-list--vertical slds-has-dividers--bottom-space slds-has-selection">
  <li class="slds-list__item">
    <div class="slds-media slds-tile">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <p class="slds-tile__title slds-truncate"><a href="#">SLDS_038.zip</a></p>
        <ul class="slds-tile__detail slds-list--horizontal slds-has-dividers slds-text-body--small">
          <li class="slds-truncate slds-list__item">May 9th, 2015</li>
          <li class="slds-truncate slds-list__item">3.6mb</li>
        </ul>
      </div>
    </div>
  </li>
  <li class="slds-list__item">
    <div class="slds-media slds-tile">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <p class="slds-tile__title slds-truncate"><a href="#">SLDS_037.zip</a></p> has-dividers
        <ul class="slds-tile__detail slds-list--horizontal slds-has-dividers slds-text-body--small">
          <li class="slds-truncate slds-list__item">May 8th, 2015</li>
          <li class="slds-truncate slds-list__item">3.7mb</li>
        </ul>
      </div>
    </div>
  </li>
  <li class="slds-list__item">
    <div class="slds-media slds-tile">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <p class="slds-tile__title slds-truncate"><a href="#">SLDS_036.zip</a></p>
        <ul class="slds-tile__detail slds-list--horizontal slds-has-dividers slds-text-body--small">
          <li class="slds-truncate slds-list__item">May 7th, 2015</li>
          <li class="slds-truncate slds-list__item">3.9mb</li>
        </ul>
      </div>
    </div>
  </li>
</ul>

Boarddev ready

Preview

Code

<ul class="slds-list--vertical slds-has-cards--space has-selections">
  <li class="slds-list__item">
    <div class="slds-tile slds-tile--board">
      <p class="slds-tile__title slds-truncate"><a href="#">Cloudhub + Anypoint Connectors</a></p>
      <div class="slds-tile__detail">
        <p class="slds-text-heading--medium">$500,000</p>
        <p class="slds-truncate"><a href="#">Company One</a></p>
        <p class="slds-truncate">Closing 9/30/2015</p>
      </div>
    </div>
  </li>
  <li class="slds-list__item">
    <div class="slds-tile slds-tile--board">
      <p class="slds-tile__title slds-truncate"><a href="#">Cloudhub</a></p>
      <div class="slds-tile__detail">
        <p class="slds-text-heading--medium">$185,000</p>
        <p class="slds-truncate"><a href="#">Company Two</a></p>
        <p class="slds-truncate slds-has-alert">Closing 12/15/2015</p>
        <span class="slds-icon_container slds-tile--board__icon">
          <svg aria-hidden="true" class="slds-icon slds-icon-text-warning slds-icon--x-small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
          </svg>
          <span class="slds-assistive-text">Warning Icon</span>
        </span>
      </div>
    </div>
  </li>
  <li class="slds-list__item">
    <div class="slds-tile slds-tile--board">
      <p class="slds-tile__title slds-truncate"><a href="#">600 Widgets</a></p>
      <div class="slds-tile__detail">
        <p class="slds-text-heading--medium">$35,000</p>
        <p class="slds-truncate"><a href="#">Company Three</a></p>
        <p class="slds-truncate">Closing 10/12/2015</p>
      </div>
    </div>
  </li>
</ul>

Component Overview

Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.

To initialize the base tile, apply the .slds-tile class to a containing <div>that contains a tile title (.slds-tile__title). Include other optional elements, such as images, icons, action overflows, and description lists, within the containing <div>.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-tile
Applied to:

<div>

Outcome:

Initializes tile

Required:

Required

Comments:

--

.slds-tile__title
Applied to:

<p>

Outcome:

Required:

Required

Comments:

--

.slds-tile__detail
Applied to:

<div> or <ul>

Outcome:

Required:

Required

Comments:

--

.slds-tile__meta
Applied to:

.slds-list--horizontal

Outcome:

Applies text color change

Required:

No, optional element or modifier

Comments:

Only used on author tile

.slds-media
Applied to:

.slds-tile

Outcome:

Layout helper that aligns image and text

Required:

No, optional element or modifier

Comments:

Use on tiles with Icons, Actions and Badges

.slds-media__body
Applied to:

<div>

Outcome:

Layout helper

Required:

No, optional element or modifier

Comments:

Wraps .slds-tile__title and .slds-tile__detail inside a .slds-media object.

.slds-truncate
Applied to:

Outcome:

Applies overflow truncation to tile detail items

Required:

No, optional element or modifier

Comments:

Can be applied to anything that needs truncation

.slds-list--horizontal
Applied to:

<ul>

Outcome:

Horizontally aligns list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers
Applied to:

.slds-list--horizontal

Outcome:

Adds dotted dividers in a horizontal list

Required:

No, optional element or modifier

Comments:

--

.slds-list--vertical
Applied to:

<ul>

Outcome:

Vertically aligns list items

Required:

No, optional element or modifier

Comments:

Applied to the list that holds multiple tiles

.slds-grid
Applied to:

Outcome:

Initializes a grid layout

Required:

No, optional element or modifier

Comments:

Wrap .slds-tile__title and icon/badge element

.slds-grid--align-spread
Applied to:

.slds-grid

Outcome:

Spreads the elements on each end of the same axis

Required:

No, optional element or modifier

Comments:

--

.slds-has-flexi-truncate
Applied to:

.slds-col

Outcome:

Layout helper applied to a parent .slds-grid when .slds-truncate is within a flex element

Required:

No, optional element or modifier

Comments:

--

.slds-hint-parent
Applied to:

.slds-tile

Outcome:

Highlights dimmed action overflow icons on tile hover

Required:

No, optional element or modifier

Comments:

--